<template>
  <div class="role">
    <page-search :searchFormConfig="searchFormConfig"></page-search>
    <page-content
      :contentTableConfig="contentTableConfig"
      @newBtnClick="handleNewData"
      @editBtnClick="handleEditData"
      pageName="role"
    ></page-content>
    <page-modal
      :modalConfig="modalConfig"
      :defaultInfo="defaultInfo"
      pageName="role"
      ref="pageModelRef"
      :otherInfo="otherInfo"
    >
      <el-tree
        ref="elTreeRef"
        :data="menu"
        show-checkbox
        node-key="id"
        :props="{
          children: 'children',
          label: 'label'
        }"
        @check="handleCheckChange"
      />
    </page-modal>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, nextTick } from "vue"
import { searchFormConfig } from "./config/search.config"
import { contentTableConfig } from "./config/content.config"
import { modalConfig } from "./config/modal.config"
import { usePageModal } from "@/hooks/use-page-modal"
import { menuMapLeafKeys } from "@/utils/map-menu"
import { ElTree } from "element-plus"
import { useStore } from "@/store"
export default defineComponent({
  name: "role",
  setup() {
    // 处理pageMOdal中的树形结构
    const elTreeRef = ref<InstanceType<typeof ElTree>>()
    const editCallback = (item: any) => {
      //遍历item中的menuIdList，将elTreeRef中的节点勾选
      const checkedKeys = menuMapLeafKeys(item.menuList)
      nextTick(() => {
        elTreeRef.value?.setCheckedKeys(checkedKeys)
      })
    }
    // modal hooks
    const [pageModelRef, handleNewData, handleEditData, defaultInfo] =
      usePageModal(undefined, editCallback)
    // 获取store中menus数据
    const store = useStore()
    const menu = computed(() => store.state.entireMenu)
    const otherInfo = ref({})
    const handleCheckChange = (data1: any, data2: any) => {
      console.log(data1, "data1")
      console.log(data2, "data2")
      const checkedKeys = data2.checkedKeys
      const halfCheckedKeys = data2.halfCheckedKeys
      const checkedMenu = [...checkedKeys, ...halfCheckedKeys]
      otherInfo.value = {
        menuIdList: checkedMenu
      }
    }
    return {
      searchFormConfig,
      contentTableConfig,
      modalConfig,
      pageModelRef,
      handleNewData,
      handleEditData,
      defaultInfo,
      menu,
      otherInfo,
      elTreeRef,
      handleCheckChange
    }
  }
})
</script>

<style scoped></style>
